<!--
  文件描述：
  创建时间：2022/3/23 10:59
  创建人：Admin
-->
<template>
<page-view class="flex-column">
  <title-bar :show-back="true" @back="$router.back()">添加收货地址</title-bar>
  <div class="content-box flex-1">
    <div class="info-item">
      <div class="left">姓名</div>
      <div class="right">
        <input type="text" placeholder="请输入姓名" v-model="addressInfo.person_name">
      </div>
    </div>
    <div class="info-item">
      <div class="left">手机号</div>
      <div class="right">
        <input type="text" placeholder="请输入手机号" v-model="addressInfo.phone">
      </div>
    </div>
    <div class="info-item">
      <div class="left">标签</div>
      <div class="right">
        <input type="text" placeholder="请输入标签" v-model="addressInfo.tag">
      </div>
    </div>
    <div class="info-item">
      <div class="left">地址</div>
      <div class="right">
        <input type="text" placeholder="请输入地址" v-model="addressInfo.address">
      </div>
    </div>
    <button class="btn save-box bg-primary" @click="addAddress">保存</button>
  </div>
</page-view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  name: "addAddress",
  data(){
    return {
      addressInfo:{
        person_name:null,
        phone:null,
        tag:null,
        address:null
      }
    }
  },
  methods:{
    async addAddress(){
      await Api.addressInfo.addAddress(this.addressInfo);
      this.$router.back();
    }
  }
}
</script>

<style scoped lang="scss">
.content-box{
  padding: 0.05rem;
  .info-item{
    padding: 0.05rem;
    height: 0.4rem;
    font-size: 0.18rem;
    //border: 1px solid red;
    margin-top: 0.02rem;
    display: flex;
    align-items: center;
    .left{
      width: 0.6rem;
    }
    .right{
      flex: 1;
      input{
        width: 90%;
        border: none;
        outline: none;
        border-bottom: 1px solid #495057;
        box-sizing: border-box;
        padding: 0.02rem 0.04rem;
      }
    }
  }
  .btn{
    width: 100%;
    height: 0.4rem;
    margin-top: 0.2rem;
    font-size: 0.2rem;
    color: white;
    border: none;
    outline: none;
    border-radius: 0.08rem;
  }
}
</style>